<template>
	<view class="content">
		<view class="qrcodeBox">
			<block v-if="status==1&&data.pay_status==2">
				<text class="qrTime" v-if="data && data.activity">
					{{$timestampToTime(data.activity.start_time)}} - {{$timestampToTime(data.activity.end_time)}}
				</text>
				<u-qrcode ref="qrcode" class="qrcode" canvas-id="qr" :value="data.id+'&5'" :size="size"></u-qrcode>
				<text class="qrAddress">
					{{data.activity.address}}
				</text>
			</block>
			<text class="status" v-else-if="status==1&&data.pay_status==1">待付款</text>
			<text class="status" v-else-if="status==3">已完成</text>
			<text class="status" v-else-if="status==4">已取消</text>
			<text class="status" v-else-if="status==5">已过期</text>
		</view>
		<view class="infoBox">
			<text class="label">活动信息</text>
			<view class="item" style="margin-top: 45rpx;">
				<text class="left">活动时间：</text>
				<text class="right" v-if="data && data.activity">{{$timestampToTime(data.activity.start_time)}}
					-{{$timestampToTime(data.activity.end_time)}}</text>
			</view>
			<view class="item">
				<text class="left">活动地点：</text>
				<text class="right">{{data.activity.address}}</text>
			</view>
			<view class="item">
				<text class="left">票券价格：</text>
				<text class="right">{{data.activity.price}}</text>
			</view>
			<view class="item">
				<text class="left">创建时间：</text>
				<text class="right">{{data.activity.created_at}}</text>
			</view>
			<view class="item">
				<text class="left">支付时间：</text>
				<text class="right">{{$timestampToTime(data.pay_time)}}</text>
			</view>
		</view>
		<view class="details">
			<text class="detailsLabel">个人信息</text>
			<view class="item">
				<text class="left">姓名：</text>
				<text class="right">{{data.name}}</text>
			</view>
			<view class="item">
				<text class="left">房间号：</text>
				<text class="right">{{data.floor_house_num}}</text>
			</view>
			<view class="item">
				<text class="left">联系方式：</text>
				<text class="right">{{data.phone}}</text>
			</view>
		</view>
		<!-- <view class="details">
			<text class="detailsLabel">券码信息</text>
			<view class="item">
				<text class="left">券码编号：</text>
				<text class="right">6人</text>
			</view>
			<view class="item">
				<text class="left">有效期：</text>
				<text class="right">6人</text>
			</view>
		</view> -->
		<view class="hexiao" @click="hexiao" v-if="admin==2">
			立即核销
		</view>
		<view class="cancel" style="margin-top: 40rpx;margin-bottom: 0rpx;" @click="pay" v-if="data.status==1&&data.pay_status==1">
			立即付款
		</view>
		<view class="cancel" style="margin-top: 40rpx;" @click="cancel" v-if="data.status==1">
			取消预约
		</view>
	</view>
</template>
<script>
	export default {
		data() {
			return {
				baseUrl: this.$baseUrl,
				size: 120,
				data: '',
				id: '',
				status: '',
				admin: 1, //2为管理员
				from: 1, //2扫码来的
				majordomo_id: ''
			}
		},
		onLoad(options) {
			this.id = options.id;
			this.status = options.status;
			this.admin = options.admin;
			this.from = options.from;
			this.majordomo_id = options.majordomo_id;
			this.$request.get(`sub_read/${this.id}`).then(res => {
				this.data = res.data.data;
			})
		},
		methods: {
			//扫码核销
			hexiao() {
				uni.showModal({
					title: '提示',
					content: '是否确认核销该订单',
					success: (res) => {
						if (res.confirm) {
							this.$request.post(`notif_handle`, {
								majordomo_id: this.majordomo_id,
								notif_id: this.id,
								notif_status: 3,
							}).then(res => {
								if (res.data.code == 10000) {
									this.$toast('核销成功');
									this.admin = 1;
									this.data.status = 4;
									if (this.from == 2) {
										setTimeout(() => {
											getApp().globalData.returnData = {
												id: this.id,
												back: 1
											};
											uni.navigateBack({
												delta: 1
											});
										}, 1000)
									}
								} else {
									this.$toast('核销失败');
								}
								console.log(res);
							});
						} else if (res.cancel) {
							console.log('用户点击取消');
						}
					}
				});
			},
			cancel() {
				uni.showModal({
					title: '提示',
					content: '是否确认取消该预约',
					success: (res) => {
						if (res.confirm) {
							this.$request.get(`user_cancel_sub?id=${this.id}`).then(res => {
								if (res.data.code == 10000) {
									this.$toast('取消成功');
									this.data.status = 4;
									this.admin = 1;
									if (this.from == 2) {
										setTimeout(() => {
											getApp().globalData.returnData = {
												id: this.id,
												back: 1
											};
											uni.navigateBack({
												delta: 1
											});
										}, 1000)
									}
								} else {
									this.$toast('取消失败');
								}
							});
						} else if (res.cancel) {
							console.log('用户点击取消');
						}
					}
				});
			}
		}
	}
</script>
<style lang="scss" scoped>
	.hexiao {
		width: 670rpx;
		height: 90rpx;
		border-radius: 6rpx;
		background: #121212;
		font-weight: 500;
		font-size: 26rpx;
		color: #FFFFFF;
		letter-spacing: 10rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		margin-top: 100rpx;
		margin-left: 40rpx;
	}

	.cancel {
		width: 670rpx;
		height: 90rpx;
		border-radius: 6rpx;
		background: #121212;
		font-weight: 500;
		font-size: 26rpx;
		color: #FFFFFF;
		letter-spacing: 10rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		margin-top: 100rpx;
		margin-left: 40rpx;
		margin-bottom: 100rpx;
	}

	.details {
		width: 670rpx;
		margin-top: 25rpx;
		padding: 50rpx 40rpx 60rpx 40rpx;
		display: flex;
		flex-direction: column;
		background-color: #fff;

		.detailsLabel {
			font-weight: 700;
			font-size: 26rpx;
			color: #121212;
			padding-bottom: 45rpx;
			border-bottom: 1rpx solid #121212;
			margin-bottom: 45rpx;
		}
	}

	.item {
		position: relative;
		// padding-top: 45rpx;
		margin-bottom: 35rpx;
		display: flex;
		justify-content: space-between;
		font-size: 24rpx;

		.note {
			width: 100%;
			margin-top: 20rpx;
		}

		.right {
			font-weight: 500;
			font-size: 24rpx;
			color: #121212;
			display: flex;
			margin-left: auto;
			text-align: right;
			align-items: center;
		}

		.left {
			font-weight: 700;
			font-size: 24rpx;
			color: #121212;
		}
	}

	.infoBox {
		display: flex;
		flex-direction: column;
		width: 100%;
		margin-top: 25rpx;
		padding: 50rpx 40rpx 50rpx 40rpx;
		background-color: #fff;
		width: 670rpx;

		.placeInfo {
			width: 670rpx;
			padding-bottom: 60rpx;
			border-bottom: 1rpx dotted #000000;
			display: flex;
			flex-direction: column;
			margin-top: 55rpx;
			position: relative;

			.placePoster {
				position: absolute;
				width: 200rpx;
				height: 150rpx;
				top: 0;
				right: 0;
				border-radius: 10rpx;
			}

			.placeAddress {
				font-weight: 500;
				font-size: 20rpx;
				color: #121212;
				margin-top: 30rpx;
				width: 69%;
			}

			.placeCapacity {
				font-weight: 500;
				font-size: 20rpx;
				color: #121212;
				margin-top: 30rpx;
			}

			.placeName {
				font-weight: 700;
				font-size: 30rpx;
				color: #121212;
				width: 69%;
				margin-top: 30rpx;
			}
		}

		.label {
			font-weight: 700;
			font-size: 26rpx;
			color: #121212;
			letter-spacing: 5rpx;
			padding-bottom: 45rpx;
			border-bottom: 1rpx solid #121212;
		}
	}

	.qrcodeBox {
		display: flex;
		flex-direction: column;
		align-items: center;
		width: 100%;
		padding-top: 80rpx;
		padding-bottom: 80rpx;
		background-color: #fff;

		.status {
			font-weight: 700;
			width: 100%;
			font-size: 38rpx;
			text-align: center;
			color: #121212;
			letter-spacing: 5rpx;
		}

		.qrAddress {
			font-weight: 500;
			font-size: 20rpx;
			color: #121212;
			letter-spacing: 4rpx;
		}

		.qrcode {
			width: 260rpx;
			height: 260rpx;
			margin-top: 50rpx;
			margin-bottom: 50rpx;
		}

		.qrTime {
			font-weight: 700;
			font-size: 36rpx;
			color: #121212;
			letter-spacing: 9rpx;

		}
	}

	.content {
		width: 100%;
		min-height: 100vh;
		display: flex;
		flex-direction: column;
		background-color: #f0f0f0;
	}
</style>